<template>
    <section>
        <!--搜索工具条-->
        <el-col :span="24" style="padding-bottom: 0px; ">
            <el-form :inline="true" :model="filtersUniv" ref="filtersUniv">
                <div class="col-title">高校对比</div>
                <el-form-item prop="year">
                    <el-select
                            placeholder="年份" v-model="filtersUniv.year" size="12px">
                        <el-option :key="item" :label="item" :value="item"
                                   v-for="item in options.years"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="belong">
                    <el-select
                            placeholder="高校所属" v-model="filtersUniv.belong" size="12px" clearable>
                        <el-option :key="item.key" :label="item.value" :value="item.key"
                                   v-for="item in dict.univ_department"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="arts_type">
                    <el-select
                            placeholder="高校类型" v-model="filtersUniv.arts_type" size="12px" clearable>
                        <el-option :key="item.key" :label="item.value" :value="item.key"
                                   v-for="item in dict.univ_pro"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="provinces">
                    <el-select
                            placeholder="地域" v-model="filtersUniv.provinces" size="18px" clearable>
                        <el-option :key="item" :label="item" :value="item"
                                   v-for="item in dict.provinces"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchUniv">搜索</el-button>
                    <el-button @click="reset('filtersUniv')">重置</el-button>
                    <el-button v-loading="univExportExeclLoading" @click="univExportExecl">导出Excel</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <!--搜索结果表格-->
        <el-table
                :data="univContrastShowData"
                stripe
                ref="univ-contrast-table"
                v-loading="checkItemListLoading"
                style="width: 100%;"
                @sort-change="tabSort"
        >
            <el-table-column
                    label="高校名称"
                    fixed
                    width="180px"
                    prop="college_name"/>
            <el-table-column
                    align="center"
                    label="全部"
                    sortable="custom"
                    width="80px"
                    prop="total"/>
            <el-table-column
                    align="center"
                    label="1.责任体系"
                    sortable="custom"
                    width="120px"
                    prop="责任体系"/>
            <el-table-column
                    align="center"
                    label="2.规章制度"
                    sortable="custom"
                    width="120px"
                    prop="规章制度"/>
            <el-table-column
                    align="center"
                    label="3.安全宣传教育"
                    sortable="custom"
                    width="140px"
                    prop="安全宣传教育"/>
            <el-table-column
                    align="center"
                    label="4.安全检查"
                    sortable="custom"
                    width="120px"
                    prop="安全检查"/>
            <el-table-column
                    align="center"
                    label="5.实验场所"
                    sortable="custom"
                    width="120px"
                    prop="实验场所"/>
            <el-table-column
                    align="center"
                    label="6.安全设施"
                    sortable="custom"
                    width="120px"
                    prop="安全设施"/>
            <el-table-column
                    align="center"
                    label="7.基础安全"
                    sortable="custom"
                    width="120px"
                    prop="基础安全"/>
            <el-table-column
                    align="center"
                    label="8.化学安全"
                    sortable="custom"
                    width="120px"
                    prop="化学安全"/>
            <el-table-column
                    align="center"
                    label="9.生物安全"
                    sortable="custom"
                    width="120px"
                    prop="生物安全"/>
            <el-table-column
                    align="center"
                    label="10.辐射安全"
                    sortable="custom"
                    width="120px"
                    prop="辐射安全"/>
            <el-table-column
                    align="center"
                    label="11.机电等安全"
                    sortable="custom"
                    width="140px"
                    prop="机电等安全"/>
            <el-table-column
                    align="center"
                    width="140px"
                    label="12.特种设备与常规冷热设备"
                    sortable="custom"
                    prop="特种设备与常规冷热设备"/>
            <el-table-column
                    align="center"
                    width="140px"
                    label="13.其他"
                    sortable="custom"
                    prop="其他"/>
        </el-table>

        <!--分页-->
        <el-col :span="24" class="toolbar">
            <el-pagination
                    style="text-align: center;"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-size="pager.page_size"
                    :page-sizes="pager.sizes"
                    background
                    :current-page="pager.page_current"
                    layout="prev,pager,next,sizes,total"
                    :total="pager.total">
            </el-pagination>
        </el-col>


        <!--搜索工具条-->
        <el-col :span="24" class="mt30" style="padding-bottom: 0px; ">
            <el-form :inline="true" :model="filtersCheckItem" ref="filtersCheckItem">
                <div class="col-title">检查项对比</div>
                <el-form-item prop="year">
                    <el-select
                            placeholder="年份" v-model="filtersCheckItem.year" size="12px">
                        <el-option :key="item" :label="item" :value="item"
                                   v-for="item in options.years"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="belong">
                    <el-select
                            placeholder="高校所属" v-model="filtersCheckItem.belong" size="12px" clearable>
                        <el-option :key="item.key" :label="item.value" :value="item.key"
                                   v-for="item in dict.univ_department"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="arts_type">
                    <el-select
                            placeholder="文理分类" v-model="filtersCheckItem.arts_type" size="12px" clearable>
                        <el-option :key="item.key" :label="item.value" :value="item.key"
                                   v-for="item in dict.univ_pro"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="provinces">
                    <el-select
                            placeholder="地域" v-model="filtersCheckItem.provinces" size="18px" clearable>
                        <el-option :key="item" :label="item" :value="item"
                                   v-for="item in dict.provinces"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchCheckItem">搜索</el-button>
                    <el-button @click="reset('filtersCheckItem', 1)">重置</el-button>
                    <el-button v-loading="checkItemExportExeclLoading" @click="checkItemExportExecl">导出Excel</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="8" class="check-item-pic">
            <bar-chart
                    v-loading="pieChartLoading"
                    :chart-data="pieChartData"
                    :chart-count="pieChartCount"
                    @chartClickCheckItem="chartClickCheckItem"
            />
        </el-col>
        <el-col :span="16" class="check-item-list">
            <div class="col-title mt30">
                {{erjiTitle}}
            </div>
            <el-table
                    :data="pieChartCheckItemData"
                    v-loading="picChartCheckItemLoading"
                    style="width: 100%;"
                    class="check-itme-header-row"
            >
                <el-table-column
                        :label="tuibiTitle"
                        prop="item_name"/>
                <el-table-column
                        align="center"
                        label="隐患数"
                        prop="total"/>
                <el-table-column
                        align="center"
                        label="占比"
                        prop="rate"/>
                <el-table-column
                        align="center"
                        label="占比(总隐患数)"
                        prop="total_rate"/>
            </el-table>
        </el-col>
    </section>
</template>

<script>
    import {
        getCompareCollege,
        getCompareInspectItem,
        exportCompareCollegeExcel,
        exportCompareInspectItemExcel
    } from '../../api/statistics_api'
    import {saveAs} from 'file-saver';
    import dict from '../../common/js/dict';
    import BarChart from './componets/divisionPieChart'

    export default {
        name: 'statisicsDivision',
        components: {
            BarChart
        },
        data() {
            return {
                dict: dict,
                currentYear: '2018',
                pieChartLoading: false,
                checkItemListLoading: false,
                picChartCheckItemLoading: false,
                univExportExeclLoading: false,
                checkItemExportExeclLoading: false,
                //表格数据
                univContrastShowData: [],
                univContrastData: [],
                pieChartData: [],
                pieChartCount: 0,
                tuibiTitle: '一级检查项',
                erjiTitle: '',
                pieChartCheckItemData: [],
                filtersUniv: {
                    year: '',
                    belong: '',
                    arts_type: '',
                    provinces: ''
                },
                filtersCheckItem: {
                    year: '',
                    belong: '',
                    arts_type: '',
                    provinces: ''
                },
                //分页设置
                pager: {
                    sizes: [10, 20, 30, 40, 50],
                    total: 0,
                    page_size: 10,
                    page_current: 1
                },
                options: {
                    years: []
                }
            }
        },
        methods: {
            univExportExecl(){
                this.univExportExeclLoading = true
                exportCompareCollegeExcel(this.filtersUniv).then(res => {
                    if(res.data.status == 200) saveAs(res.data.datas,'')
                    this.univExportExeclLoading = false
                })
            },
            checkItemExportExecl(){
                this.checkItemExportExeclLoading = true
                exportCompareInspectItemExcel(this.filtersCheckItem).then(res => {
                    if(res.data.status == 200) saveAs(res.data.datas,'')
                    this.checkItemExportExeclLoading = false
                })
            },
            compare(attr, rev) {
                if (rev == null)
                    rev = 1
                else
                    rev = (rev) ? 1 : -1
                return (a, b) => {
                    a = a[attr]
                    b = b[attr]

                    if (Number(a) < Number(b)) {
                        return rev * -1
                    }
                    if (Number(a) > Number(b)) {
                        return rev * 1
                    }
                    return 0
                }
            },
            setPages() {
                let tempData = JSON.parse(JSON.stringify(this.univContrastData))
                let start = 0, end = 0
                end = this.pager.page_current * this.pager.page_size
                start = end - this.pager.page_size
                this.univContrastShowData = tempData.slice(start, end)
            },
            tabSort(column) {
                let tempData = JSON.parse(JSON.stringify(this.univContrastData))
                let rev = column.order == 'ascending' ? true : false
                tempData.sort(this.compare(column.prop, rev))
                this.univContrastData = tempData
                this.setPages()
            },

            //分页page_size发生改变
            handleSizeChange(val) {
                this.pager.page_current = 1
                this.pager.page_size = val
                this.setPages()
            },
            //分页page_current发生改变
            handleCurrentChange(val) {
                this.pager.page_current = val
                this.setPages()
            },
            searchUniv() {
                this.pager.page_current = 1
                this.getUnivContrastData()
            },

            getUnivContrastData() {
                this.checkItemListLoading = true;
                getCompareCollege(this.filtersUniv).then(res => {
                    if (res.data.status == 200) {
                        let tempData = JSON.parse(res.data.datas)
                        tempData.map(item => {
                            item.inspect_items.map(checkItem => {
                                item[checkItem.item_name] = checkItem.count
                            })
                        })
                        this.pager.total = tempData.length
                        this.univContrastData = tempData
                        this.tabSort({prop: 'total', order: 'ascending'})
                    }
                    this.checkItemListLoading = false;
                })
            },

            searchCheckItem() {
                this.pager.page_current = 1;
                this.getCheckItemsContrastData();
            },

            getCheckItemsContrastData() {
                this.pieChartLoading = true;
                this.pieChartCount = 0;
                getCompareInspectItem(this.filtersCheckItem).then(res => {
                    if (res.data.status == 200) {
                        let tempData = JSON.parse(res.data.datas)
                        this.pieChartData = tempData.items.map(item => {
                            this.pieChartCount += item.total;
                            return {
                                id: item.item_id,
                                name: item.item_name,
                                value: item.total,
                                sub_items: item.sub_items
                            }
                        })
                        this.tuibiTitle = '一级检查项';
                        this.erjiTitle = "";
                        this.pieChartCheckItemData = tempData.items;
                    }

                    this.pieChartLoading = false;
                })
            },
            reset(name, checkItem) {
                this.$refs[name].resetFields();
                this.currentYear = (new Date()).getFullYear() + '';
                this[name].year = this.currentYear;
                this.pager.page_current = 1;
                if (checkItem) {
                    return this.getCheckItemsContrastData()
                } else {
                    return this.getUnivContrastData()
                }
            },
            initYears() {
                this.currentYear = (new Date()).getFullYear() + '';
                this.filtersUniv.year = this.currentYear;
                this.filtersCheckItem.year = this.currentYear;
                for (let i = this.currentYear; i >= 2018; i--) {
                    this.options.years.push(i);
                }
            },
            chartClickCheckItem(params) {
                this.erjiTitle = params.name
                this.tuibiTitle = '二级检查项';
                this.pieChartCheckItemData = params.data.sub_items;
            },
            //初始化页面
            initData() {
                this.initYears();
                this.getUnivContrastData();
                this.getCheckItemsContrastData();
            }
        },
        mounted() {
            this.$nextTick(function () {
                this.initData();
            })
        }
    }
</script>

<style lang="scss">
    .check-itme-header-row.el-table th.is-leaf {
        height: 30px;
        background: none;
        div.cell {
            font-weight: 400;
            color: #666;
        }
    }
</style>
<style scoped lang="scss">
    .mt30 {
        margin-top: 30px;
    }

    .col-title {
        display: inline-table;
        font-weight: 600;
        font-size: 16px;
        color: #333;
        padding: 0 30px 0 15px;
    }
</style>
